<template>
  <div class="filter-panel">
    <el-row :gutter="16" align="middle">
      <!-- 月份选择 -->
      <el-col :span="4">
        <div class="filter-item">
          <label>月份：</label>
          <el-date-picker
            v-model="filters.workTime"
            type="month"
            placeholder="选择月份"
            format="YYYY-MM"
            value-format="YYYY-MM"
            size="default"
            style="width: 100%"
          />
        </div>
      </el-col>

      <!-- 分类选择 -->
      <el-col :span="4">
        <div class="filter-item">
          <label>分类：</label>
          <el-select
            v-model="filters.className"
            placeholder="选择分类"
            clearable
            size="default"
            style="width: 100%"
          >
            <el-option
              v-for="(item, idx) in props.classOptions as Array<{ value: number|string|null, label: string }>"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
      </el-col>

      <!-- 区域选择 -->
      <el-col :span="4">
        <div class="filter-item">
          <label>区域：</label>
          <el-select
            v-model="filters.workAreaId"
            placeholder="选择区域"
            clearable
            size="default"
            style="width: 100%"
          >
            <el-option
              v-for="(item, idx) in props.areaOptions as Array<{ value: number|string|null, label: string }>"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
      </el-col>

      <!-- 是否计划开工 -->
      <el-col :span="4">
        <div class="filter-item">
          <label>状态：</label>
          <el-switch
            v-model="filters.planStart"
            active-text="已开工"
            inactive-text="未开工"
            :active-value="true"
            :inactive-value="false"
          />
        </div>
      </el-col>

      <!-- 操作按钮 -->
      <el-col :span="4">
        <div class="filter-actions">
          <el-button type="primary" @click="handleQuery" :loading="loading">
            <el-icon><ele-Search /></el-icon>
            查询
          </el-button>
          <el-button @click="handleReset">
            <el-icon><ele-RefreshLeft /></el-icon>
            重置
          </el-button>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'

// 定义事件
const emit = defineEmits(['query', 'reset', 'export'])

// 接收下拉选项通过props传入
const props = defineProps({
  classOptions: { type: Array, default: () => [] },
  areaOptions: { type: Array, default: () => [] }
})

// 响应式数据
const loading = ref(false)
const exportLoading = ref(false)

// 筛选条件
const filters = reactive({
  workTime: '',
  className: null,
  workAreaId: null,
  keyword: '',
  planStart: false // 新增，默认false
})

// 处理查询
const handleQuery = () => {
  // 验证必填项
  if (!filters.workTime) {
    ElMessage.warning('请选择月份')
    return
  }

  loading.value = true
  
  // 构建查询参数
  const params = {
    workTime: filters.workTime,
    className: filters.className || undefined,
    workAreaId: filters.workAreaId || undefined,
    keyword: filters.keyword || undefined,
    planStart: filters.planStart // 新增
  }

  // 模拟API调用延迟
  setTimeout(() => {
    emit('query', params)
    loading.value = false
  }, 500)
}

// 处理重置
const handleReset = () => {
  // 重置为默认值
  const now = new Date()
  const currentMonth = now.getFullYear() + '-' + String(now.getMonth() + 1).padStart(2, '0')
  
  filters.workTime = currentMonth
  filters.className = null
  filters.workAreaId = null
  filters.keyword = ''
  filters.planStart = false // 新增

  emit('reset')
}

// 处理导出
const handleExport = () => {
  if (!filters.workTime) {
    ElMessage.warning('请选择月份后再导出')
    return
  }

  exportLoading.value = true
  
  // 模拟导出操作
  setTimeout(() => {
    ElMessage.success('导出成功')
    exportLoading.value = false
  }, 2000)
}

// 初始化
onMounted(() => {
  // 设置默认月份
  const now = new Date()
  const currentMonth = now.getFullYear() + '-' + String(now.getMonth() + 1).padStart(2, '0')
  filters.workTime = currentMonth
})
</script>

<style lang="scss" scoped>
.filter-panel {
  .filter-item {
    display: flex;
    align-items: center;
    
    label {
      min-width: 50px;
      margin-right: 8px;
      font-size: 14px;
      color: #606266;
      white-space: nowrap;
    }
  }
  
  .filter-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    
    .el-button {
      display: flex;
      align-items: center;
      gap: 4px;
    }
  }
}

@media (max-width: 1200px) {
  .filter-panel {
    :deep(.el-row) {
      flex-wrap: wrap;
    }
    
    .el-col {
      margin-bottom: 12px;
    }
    
    .filter-actions {
      justify-content: flex-start;
    }
  }
}

@media (max-width: 768px) {
  .filter-panel {
    .filter-item {
      flex-direction: column;
      align-items: flex-start;
      
      label {
        margin-bottom: 4px;
        margin-right: 0;
      }
    }
    
    .filter-actions {
      .el-button {
        flex: 1;
      }
    }
  }
}
</style>